<template>
  <div class="overview-container">
    <div class="overview">
      <div class="all-round">
        <div class="head">
          <div class="head-left">
              <div class="title">
                综合概况
            </div>
          </div>
          <div class="head-right"></div>
        </div>
        <div class="mian">
          <div class="main-head">
            <div class="title">表面处理车间</div>
          </div>
          <div class="main-body">
            <div class="day-oee">
              <!-- <div class="oee-value">{{ overview.production.oee + '%' }}</div>
              <div class="oee-text">日OEE</div> -->
              <dv-decoration-9 style="width:150px;height:150px;">{{ overview.production.oee + '%' }}</dv-decoration-9>
            </div>
            <div class="production">
              <div class="today-production">
                <div class="label">当日产量</div>
                <div class="value">{{ overview.production.day }}</div>
              </div>
              <div class="month-production">
                <div class="label">当月产量</div>
                <div class="value">{{ overview.production.month }}</div>
              </div>
            </div>
            <div class="factory"></div>
          </div>
          <div class="main-footer">
            <div class="footer-item">
              <div class="item-icon communication-icon">
              </div>
              <div class="item-text">
                <div class="text-status">
                  <span v-if="overview.situation.communication === 0" style="color: #6BCB4F">正常</span>
                  <span v-if="overview.situation.communication === 1" style="color: #3FAEFF">良好</span>
                  <span v-if="overview.situation.communication === 2" style="color: #E39B69">不良</span>
                </div>
                <div class="text-object">通讯状况</div>
              </div>
            </div>
            <div class="footer-item">
              <div class="item-icon efficiency-icon">
              </div>
              <div class="item-text">
                <div class="text-status">
                  <span v-if="overview.situation.efficiency === 0" style="color: #6BCB4F">正常</span>
                  <span v-if="overview.situation.efficiency === 1" style="color: #3FAEFF">良好</span>
                  <span v-if="overview.situation.efficiency === 2" style="color: #E39B69">不良</span>
                </div>
                <div class="text-object">生产效率</div>
              </div>
            </div>
            <div class="footer-item">
              <div class="item-icon security-icon">
              </div>
              <div class="item-text">
                <div class="text-status">
                  <span v-if="overview.situation.security === 0" style="color: #6BCB4F">正常</span>
                  <span v-if="overview.situation.security === 1" style="color: #3FAEFF">良好</span>
                  <span v-if="overview.situation.security === 2" style="color: #E39B69">不良</span>
                </div>
                <div class="text-object">安防级别</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="device-list">
        <div class="head">
          <div class="head-left">
            <div class="title">
              设备列表
            </div>
          </div>
          <div class="head-right">
            <div class="device-count">
              <span class="count-title">设备总数：</span>
              <span class="count-value">{{ deviceCount.total }}</span>
            </div>
            <div class="device-count">
              <span class="count-title">设备在线：</span>
              <span class="count-value">{{ deviceCount.online }}</span>
            </div>
          </div>
        </div>
        <div class="mian">
          <div class="search">
            <Input search @on-search="getDeviceData" @on-change="searchValueChange" placeholder="请输入工件序列号、图号、编码" />
          </div>
          <div class="device-lists">
           <div class="list-head">
            <div>序号</div>
            <div>产线名称</div>
            <div>设备型号</div>
            <div>设备编号</div>
            <div>运行状况</div>
           </div>
           <div class="list-body">
            <div :class="['list-item', item.status === 0 ? 'blue-background' : item.status === 1 ? 'blue-background' : item.status === 2 ? 'warn-background' : item.status === 3 ? 'fault-background' : '']" v-for="(item, idx) in deviceData" :key="idx">
              <div class="text-bold">{{ idx + 1 }}</div>
              <div>{{item.place}}</div>
              <div class="blue-text">{{item.type}}</div>
              <div>{{item.number}}</div>
              <div
                :class="item.status === 0 ? 'green-text' : item.status === 1 ? 'blue-text' : item.status === 2 ? 'warn-text' : item.status === 3 ? 'fault-text' : 'blue-text'">
                {{item.status === 0 ? '正常' : item.status === 1 ? '离线' : item.status === 2 ? '告警' : item.status === 3 ? '故障' : '未知'}}
              </div>
            </div>
           </div>
          </div>
        </div>
      </div>
      <div class="workshop-monitoring-screen">
        <div class="head">
          <div class="head-left">
              <div class="title">
              车间监控画面
            </div>
          </div>
          <div class="head-right">
            <div class="more"><a>更多 ></a></div>
          </div>
        </div>
        <div class="mian">
          <div class="video-box">
            <video src="@/assets/img/test.mp4" controls autoplay muted loop></video>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Tcmd } from './command'
import { Component, Vue } from 'vue-property-decorator';
import { Tsrv } from '@/services';

@Component  
export default class Overview extends Vue {
  private timer: any = null;

  private isRunning: boolean = false

  private searchValue: string = '';

  private overview: any = {
    production: {
      oee: 0,
      day: 0,
      month: 0
    }, 
    situation: {
      communication: 0,
      efficiency: 0,
      security: 0
    }
  };

  private deviceCount: any = {
    total: 0,
    online: 0
  };

  private deviceData: any = [
      // {
      //     place: '荧光清洗、铬酸阳极化生产线',
      //     type: '工艺槽',
      //     number: '4#碱腐蚀槽 ',
      //     // 0: '正常',1: '离线',2: '告警',3: '故障'
      //     status: 0
      // }
  ]

  mounted() {
    this.getOverviewInfo();
    this.getDeviceData();
  }

  private startTimer(time: number = 3000) {
    if (!this.isRunning) {
      this.isRunning = true
      this.timer = setInterval(() => {
        // this.getDeviceData();
      }, time)
    }
  }

  private pauseTimer() {
    if (this.isRunning && !Tsrv.noValue(this.timer)) {
      clearInterval(this.timer)
      this.isRunning = false
    }
  }

  /**
   * 获取设备信息
   */
  private getDeviceData(): Promise<boolean> {
    return new Promise((resolve, reject)=> {
      const param = {
        type: 'svcLogic',
        cmd: 'sw_devices_info',
        userInfo: {},
        funInfo: {},
        data: {
          searchValue: this.searchValue
        }
      }

      Tcmd.doEvent(param).then(res=> {
        const [b, resp, data, msg] = res;
        if (b) {
          const d = data?.deviceList;
          if (!Tsrv.noValue(d)) {
            this.deviceData = d?.list;
            const count = d?.count;
            if (!Tsrv.noValue(count?.total)) {
              this.deviceCount.total = count.total;
            }
            if (!Tsrv.noValue(count?.online)) {
              this.deviceCount.online = count.online;
            }
          }
          resolve(true);
        } else {
          this.$Message.error(msg);
          resolve(false);
        }
      }).catch(err=> {
        this.$Message.error(`${err}`);
      });
    })
  }

  /**
   * 获取
   */
  private getOverviewInfo(): Promise<boolean> {
    return new Promise((resolve, reject)=> {
      const param = {
        type: 'svcLogic',
        cmd: 'sw_comprehensive_overview',
        userInfo: {},
        funInfo: {},
        data: {}
      }

      Tcmd.doEvent(param).then(res=> {
        const [b, resp, data, msg] = res;
        if (b) {
          const d = data?.overview;
          if (!Tsrv.noValue(d)) {
            if (!Tsrv.noValue(d?.production)) {
              const production = d.production;
              this.overview.production.oee = production?.oee ?? 0;
              this.overview.production.day = production?.day ?? 0;
              this.overview.production.month = production?.month ?? 0;
            }
            if (!Tsrv.noValue(d?.situation)) {
              const situation = d.situation;
              this.overview.situation.communication = situation?.communication ?? 0;
              this.overview.situation.efficiency = situation?.efficiency ?? 0;
              this.overview.situation.security = situation?.security ?? 0;
            }
          }
          resolve(true);
        } else {
          this.$Message.error(msg);
          resolve(false);
        }
      }).catch(err=> {
        this.$Message.error(`${err}`);
      });
    })
  }

  private searchValueChange(e: any) {
    this.searchValue = e.target.value;
  }

  beforeDestroy() {
    this.pauseTimer();
  }
}
</script>

<style lang="scss" scoped>
.overview-container {
  width: 100%;
  height: 100%;
  .overview {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 4fr 4fr 3fr;
    overflow: hidden;

    .head {
      // height: 30px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      border-bottom: 3px solid #0CA2E0;
      .head-left {
        .title {
          font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
          font-weight: normal;
          font-size: 17px;
          color: #EAEFF5;
          text-shadow: 0px 2px 3px rgba(35,142,232,0.54);
          text-align: left;
          font-style: normal;
        }
      }
    }
    .all-round {
      padding: 0 10px 10px;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 30px 1fr;

      border: 1px solid #ccc; // 测试

      .mian {
        height: 100%;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 3fr 2fr;
        gap: 10px;
        .main-head {
          // width: 100%;
          // height: 100%;
          .title {
            width: 50%;
            height: 100%;
            display: grid;
            place-items: center;
            font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
            font-weight: normal;
            font-size: 14px;
            color: #EAEFF5;
            font-style: normal;
            background: linear-gradient( 270deg, rgba(7,16,33,0) 0%, #0B6B97 48%, rgba(9,17,32,0) 100%);
          }
        }
        .main-body {
          display: grid;
          grid-template-columns: 3fr 2fr 4fr;
          grid-template-rows: 1fr;
          .day-oee {
            background-repeat: no-repeat;
            background-position: center; /* 图片居中 */
            background-size: contain;
            background-image: url('../../assets/img/oee.png');
            font-family: D-DINExp, D-DINExp;
            color: #FFFFFF;
            text-align: left;
            font-style: italic;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .oee-value {
              font-size: 20px;
              // font-weight: bold;
            }
            .oee-text {
              font-size: 12px;
            }
          }
          .production {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: 1fr 1fr;

            .label {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 16px;
              color: #FFFFFF;
              text-align: left;
              font-style: normal;
            }

            .today-production {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              .value {
                font-family: DINAlternate, DINAlternate;
                font-weight: bold;
                font-size: 20px;
                text-align: left;
                font-style: normal;
                // color: #FFFFFF;
                // background: linear-gradient(90deg, #FCF0DA 0%, #C06A38 100%);
                color: rgb(216, 163, 126);
              }
            }

            .month-production {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              .value {
                font-family: DINAlternate, DINAlternate;
                font-weight: bold;
                font-size: 20px;
                text-align: left;
                font-style: normal;
                // color: #FFFFFF;
                // background: linear-gradient(90deg, #FCF0DA 0%, #4BC9DD 100%);
                color: rgb(156, 218, 218);
              }
            }
          }
          .factory {
            background-repeat: no-repeat;
            background-position: center; /* 图片居中 */
            background-size: contain;
            background-image: url('../../assets/img/factory.png');
          }
        }
        .main-footer {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          grid-template-rows: 1fr;
          gap: 5px;

          .footer-item {
            display: grid;
            grid-template-columns: 3fr 2fr;
            grid-template-rows: 1fr;
            gap: 5px;

            .item-icon {
              background-repeat: no-repeat;
              background-position: center; /* 图片居中 */
              background-size: contain;
            }
            .communication-icon {
              background-image: url('../../assets/img/communication.png');
            }
            .efficiency-icon {
              background-image: url('../../assets/img/efficiency.png');
            }
            .security-icon {
              background-image: url('../../assets/img/security.png');
            }

            .item-text {
              width: 100%;
              height: 100%;
              display: grid;
              grid-template-columns: 1fr;
              grid-template-rows: 2fr 1fr;
              justify-items: center;
              align-items: center;

              .text-status {
                width: 100%;
                height: 100%;
                font-family: PingFangSC, PingFang SC;
                font-weight: 300;
                font-size: 22px;
                color: #6BCB4F;
                text-align: left;
                font-style: normal;
                border-bottom: 1px solid rgba(255, 255, 255, 0.2);
                display: flex;
                justify-content: center;
                align-items: center;
              }
              .text-object {
                width: 100%;
                height: 100%;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #FFFFFF;
                text-align: left;
                font-style: normal;
                display: flex;
                justify-content: center;
                align-items: center;
              }
            }
          }
        }
      }
    }
    .device-list {
      padding: 0 10px 10px;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 30px 1fr;
      border: 1px solid #ccc; // 测试
      overflow: hidden;
      justify-items: center;
      align-items: center;
      .head {
        width: 100%;
        height: 100%;
        // margin-bottom: 10px;
        .head-right {
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          align-items: center;

          .device-count + .device-count {
            margin-left: 20px;
          }

          .device-count {
            .count-title {
              font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
              font-weight: normal;
              font-size: 14px;
              color: #EAEFF5;
              text-align: left;
              font-style: normal;
            }
            .count-value {
              font-family: D, D;
              font-weight: normal;
              font-size: 20px;
              color: #07E8F5;
              text-align: right;
              font-style: normal;
            }
          }
        }
      }
      .mian {
        width: 100%;
        height: 100%;
        margin-top: 10px;
        overflow: hidden;
        .search {
          height: 40px;
          overflow: hidden;
          ::v-deep .ivu-input-wrapper {
            .ivu-input {
              border: 2px solid #0C8ECE;
              background-color: transparent;
              color: #FDFFFF;
            }
          }
        }
        .device-lists {
          // height: 100%;
          height: calc(100% - 41px);
          width: 100%;
          display: grid;
          grid-template-columns: 1fr;
          grid-template-rows: 1fr 3fr;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          overflow: hidden;
          // padding: 5px 3px 5px 10px;

          .list-head {
            height: 50px;
            display: grid;
            grid-template-columns: 1fr 4fr 3fr 2fr 2fr;
            justify-items: center;
            align-items: center;
            border-bottom: 2px solid #0C8ECE;
            margin-bottom: 2px;
            
            div {
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              font-size: 15px;
              color: #FDFFFF;
              text-align: center;
              font-style: normal;
            }
          }
          .list-body {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;

            overflow-y: auto;
            overflow-x: hidden;
            
            &::-webkit-scrollbar {
              width: 6px;
              background: #f5f5f5;
              border-radius: 6px;
            }

            &::-webkit-scrollbar-track-piece {
              background: rgba(255, 255, 255, 0.2);
              border-radius: 6px;
            }

            &::-webkit-scrollbar-thumb {
              background: #0C8ECE;
              border-radius: 6px;
            }

            .list-item {
              width: 100%;
              height: 47px;
              flex-shrink: 0; /* 防止flex布局压缩高度 */
              box-sizing: border-box; /* 确保padding不影响高度计算 */
              display: grid;
              grid-template-columns: 1fr 4fr 3fr 2fr 2fr;
              grid-template-rows: 1fr;
              justify-items: center;
              align-items: center;

              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 12px;
              color: #FDFFFF;
              text-align: left;
              font-style: normal;
            }

            .text-bold {
              font-weight: 700;
            }

            .green-text {
              color: rgb(107, 203, 79);;
            }

            .blue-text {
              color: #7EF0F9;
            }
            .warn-text {
              color: #F04818;
            }
            .fault-text {
              color: #FAD110;
            }

            .fault-background {
              background: linear-gradient( 135deg, rgba(255,225,173,0.42) 0%, rgba(12,49,110,0.42) 16%, #0B2D65 100%);
            }
            .blue-background {
              background: linear-gradient( 135deg, rgba(74,222,255,0.42) 0%, rgba(12,21,33,0.42) 16%, rgba(8,19,35,0.45) 55%, #060D1B 100%);
            }
            .warn-background {
              background: linear-gradient( 135deg, rgba(255,153,94,0.42) 0%, rgba(12,49,110,0.42) 16%, #0B2D65 100%);
            }

          }
        }
      }
    }
    .workshop-monitoring-screen {
      padding: 0 10px 10px;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 30px 1fr;
      padding: 0 10px 10px;
      border: 1px solid #ccc; // 测试
      .head {
        .head-right {
          .more {
            font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
            font-weight: normal;
            font-size: 14px;
            color: #07E8F5;
            text-align: right;
            font-style: normal;
          }
        }
      }
      .mian {
        width: 100%;
        height: 100%;
        margin-top: 10px;
        .video-box {
          width: 100%;
          height: 100%;
          overflow: hidden !important;
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          
          video {
            position: absolute;
            max-width: 100% !important;
            max-height: 100% !important;
            width: auto !important;
            height: auto !important;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            object-fit: contain;
          }
        }
      }
    }
  }
}

.item-icon {
  img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }
}
</style>